class GameUI {
    constructor() {
        this.initializeUI();
        this.bindEvents();
    }

    initializeUI() {
        this.playerCardsArea = document.querySelector('.player-self .player-cards');
        this.playedCardsArea = document.querySelector('.played-cards');
        this.playButton = document.getElementById('playCards');
        this.passButton = document.getElementById('pass');
        this.startButton = document.getElementById('startGame');
    }

    bindEvents() {
        this.playButton.addEventListener('click', () => this.onPlay());
        this.passButton.addEventListener('click', () => this.onPass());
        this.startButton.addEventListener('click', () => this.onGameStart());
    }

    renderPlayerCards(cards) {
        this.playerCardsArea.innerHTML = '';
        cards.forEach(card => {
            const cardElement = card.createCardElement();
            cardElement.addEventListener('click', () => this.onCardClick(card));
            this.playerCardsArea.appendChild(cardElement);
        });
    }

    renderPlayedCards(cards) {
        this.playedCardsArea.innerHTML = '';
        cards.forEach(card => {
            const cardElement = card.createCardElement();
            this.playedCardsArea.appendChild(cardElement);
        });
    }

    onCardClick(card) {
        card.selected = !card.selected;
        this.renderPlayerCards(game.currentPlayer.cards);
    }

    onPlay() {
        const selectedCards = game.currentPlayer.cards.filter(card => card.selected);
        if (game.validatePlay(selectedCards)) {
            game.playCards(selectedCards);
        } else {
            alert('无效的出牌！');
        }
    }

    onPass() {
        game.pass();
    }

    onGameStart() {
        game.start();
    }
} 